import React, { Children, useMemo } from 'react';
import './index.css';

interface Iprops{
  width?: number | string;
  height?: number | string;
  outsideColor?: string;
  insideColor?: string;
  duration?: number;
  children?: React.ReactChildren;
}

export default ({
  width = 300,
  height = 300,
  outsideColor = '#3be6cb',
  insideColor = '#32bcfe',
  duration = 2,
  children
}: Iprops) => {

  const outSideColorAnimation = useMemo(() => {
    return `${outsideColor};${insideColor};${outsideColor}`
  }, []);

  const inSideColorAnimation = useMemo(() => {
    return `${insideColor};${outsideColor};${insideColor}`
  }, []);

  return <div className='double-loading'>
            <svg width={width} height={height} viewBox="0 0 50 50" preserveAspectRatio='xMidYMid meet'>
              {/*
                stroke-dasharry = 2pi*r/4 = 2 * 3.1415926 * 22 / 4
              */}
              <circle
                cx={25}
                cy={25}
                r={22}
                fill='none'
                strokeWidth={3}
                stroke={outsideColor}
                strokeDasharray={34}
                strokeLinecap='round'
              >
                <animateTransform
                  attributeName='transform'
                  type='rotate'
                  // from={'0 25 25'}
                  // to={'360 25 25'}
                  values='0 25 25;360 25 25'
                  dur={duration}
                  repeatCount={'indefinite'}
                />
                <animate
                  attributeName='stroke'
                  values={outSideColorAnimation}
                  dur='2'
                  repeatCount='indefinite'
                />
              </circle>
              <circle
                cx={25}
                cy={25}
                r={12}
                fill='none'
                strokeWidth={3}
                strokeDasharray={19}
                strokeLinecap='round'
                stroke={insideColor}
              >
                <animateTransform
                  attributeName='transform'
                  type='rotate'
                  // from={'360 25 25'}
                  // to={'0 25 25'}
                  values='360 25 25;0 25 25'
                  dur={duration * 2}
                  repeatCount={'indefinite'}
                />
                <animate
                  attributeName='stroke'
                  values={inSideColorAnimation}
                  dur={2}
                  repeatCount='indefinite'
                />
              </circle>
            </svg>
            <div style={{ textAlign: 'center' }}>
               {children}
            </div>
         </div>
};


